<template>
  <div class="activity-detail" ref="activityDetail">
    <div class="activity-detail-title">活动、机构介绍</div>
    <el-divider></el-divider>
    <div class="type-selector">
      <div class="type-option" :class="[type.value === typeValue ? 'active' : '']" v-for="(type, index) in typeOptions" :key="`type-option-${index}`"
           @click="typeChanged(type.value)">
        <div class="type-option-title">{{ type.title }}</div>
        <div class="type-option-subtitle">{{ type.subtitle }}</div>
      </div>
    </div>
    <div class="detail-content">
      <div class="detail-content-concise" v-show="typeValue === 'concise'">
        <draggable
            v-if="conciseValue && conciseValue.length > 0"
            class="concise-draggable"
            :list="conciseValue"
            draggable=".concise-item"
            :sort="true"
        >
          <div class="concise-item" v-for="(item, index) in conciseValue" :key="`concise-item-${index}`">
            <div class="concise-item-editor">
              <div class="concise-item-text" v-if="item.type === 'text'">
                <MiniTextEditor v-model="item.content" :min-height="150"/>
<!--                <div>{{ item.content }}</div>-->
              </div>
              <div class="concise-item-image" v-if="item.type === 'image'">
                <template v-if="item.content && item.content.length > 0">
                  <el-image style="width: 100%;" :src="item.content" fit="fill" :lazy="false">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <BtnSingleImageUpload :is-show-tip='false' v-model="item.content" :limit="1">
                    <div class="concise-item-image-btn">
                      <!-- 上传按钮 -->
                      <div class="btn">
                        <div class="icon-upload"></div>
                        <div>换图</div>
                      </div>
                    </div>
                  </BtnSingleImageUpload>
                </template>
                <template v-else>
                  <BtnSingleImageUpload :is-show-tip="false" v-model="item.content">
                    <div style="width: 100%; height: 150px; display: flex;flex-direction: column; justify-content: center; align-items: center;">
                      <div>
                        <i class="el-icon-plus"></i>
                      </div>
                      <p style="text-align: center;margin-top: 20px;">
                        (点击选择图片，不上传则不显示)
                      </p>
                    </div>
                  </BtnSingleImageUpload>
                </template>
              </div>
            </div>
            <div class="concise-item-move-box" v-if="conciseValue.length > 1">
              <div class="icon-move-up" @click="sortCard('up', index)" v-if="index > 0"></div>
              <div class="icon-move-down" @click="sortCard('down', index)" v-if="index < (conciseValue.length - 1)"></div>
            </div>
            <div class="icon-close" @click="delCard(index)"></div>
          </div>
        </draggable>
      </div>

      <div class="concise-control-box" v-show="typeValue === 'concise'">
        <div class="concise-control-btn" @click="addConsiseItem('text')">+ 文本</div>
        <div class="concise-control-btn" @click="addConsiseItem('image')">+ 图片</div>
      </div>

      <div class="detail-content-rich" v-if="typeValue === 'rich'">
        <editor v-model="richValue" :min-height="800" ref="richContent"/>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {getToken} from "@/utils/auth";
import BtnSingleImageUpload from '@/components/BtnSingleImageUpload'
import MiniTextEditor from '@/components/MiniTextEditor'
import {sortCard} from "@/utils/moveArray";

export default {
  name: "ActivityDetailContentConfig",
  components: {
    draggable,
    BtnSingleImageUpload,
    MiniTextEditor,
  },
  props: {
    value: {
      type: Object,
      default: {
        show_way_type: 'concise',
        concise_content: [],
        rich_content: '',
      }
    }
  },
  data() {
    return {
      typeValue: 'concise',
      typeOptions: [{
        title: '简单样式',
        subtitle: '可按模块上传文字，图片并支持自定义排序',
        value: 'concise',
      }, {
        title: '丰富样式',
        subtitle: '适合有图文编辑器使用经验（如公众号文案排版）使用',
        value: 'rich',
      }],
      conciseValue: '',
      richValue: '',
      uploadUrl: process.env.VUE_APP_BASE_API + "/infra/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
    }
  },
  watch: {
    value: {
      async handler(val) {
        if (val && val.show_way_type) {
          const type = val.show_way_type || 'concise';
          if (type === 'concise') {
            const content = val.concise_content || []
            this.conciseValue = content
          }
          if (type === 'rich') {
            const content = val.rich_content || ''
            this.richValue = content
          }
          this.typeValue = type
        }
      },
      deep: true,
      immediate: true
    },
    richValue() {
      this.changed()
    }
  },
  methods: {
    sortCard(type, index) {
      sortCard(type, index, this.conciseValue)
      this.changed()
    },
    delCard(index) {
      this.conciseValue.splice(index, 1)
      this.changed()
    },
    typeChanged(val) {
      // const elements = document.getElementsByClassName('activity-detail');
      // if (elements && elements.length > 0) {
      //   console.log('scrollTop', elements[0].scrollTop)
      // }
      if (val != this.typeValue) {
        const type = val || 'concise';
        if (type === 'concise') {
          const content = this.value.concise_content || []
          this.conciseValue = content
        }
        if (type === 'rich') {
          const content = this.value.rich_content || ''
          this.richValue = content
        }
        this.typeValue = val
      }
      this.changed()
      // this.$nextTick(() => {
      //   const elements = document.getElementsByClassName('activity-detail');
      //   if (elements && elements?.length > 0) {
      //     elements[0].scrollIntoView({
      //       behavior: 'smooth'
      //     });
      //   }
      // })
    },
    addConsiseItem(type) {
      if (type === 'text') {
        this.conciseValue.push({
          type: 'text',
          content: ''
        })
      }
      if (type === 'image') {
        this.conciseValue.push({
          type: 'image',
          content: []
        })
      }
      this.changed()
    },
    changed() {
      const value = {
        show_way_type: this.typeValue,
        concise_content: this.typeValue === 'concise' ? this.conciseValue : this.value.concise_content,
        rich_content: this.typeValue === 'rich' ? this.richValue : this.value.rich_content,
      }
      this.$emit("input", JSON.parse(JSON.stringify(value)));
    },
  }
}
</script>
<style lang="scss" scoped>
.activity-detail {
  .activity-detail-title {
    box-sizing: border-box;
    position: relative;
    padding-left: 20px;
    color: #2254f5;
    font-size: 18px;
    font-weight: 700;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 8px;
      margin: auto;
      height: 30px;
      width: 4px;
      background: #2254f4;
    }
  }

  .type-selector {
    display: flex;
    justify-content: space-between;
    .type-option {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      color: #333;
      font-size: 16px;
      background: #f6f7f9;
      border: 1px solid #f6f7f9;
      border-radius: 6px;
      padding: 15px 10px;
      box-sizing: border-box;
      cursor: pointer;

      margin: 10px;
      .type-option-title {
        color: #333;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
      }
      .type-option-subtitle {
        color: #333;
        font-size: 14px;
      }

      &.active {
        background: #ecf2ff;
        border-color: #2254f5;

        &:after {
          position: absolute;
          top: -1px;
          right: -1px;
          display: inline-block;
          content: "";
          width: 20px;
          height: 20px;
          background-color: #3361ff;
          background-repeat: no-repeat;
          background-position: 50%;
          background-image: url('~@/assets/images/activity/icon_check_white.png');
          background-size: 8px 6px;
          border-radius: 0 6px 0 6px;
        }
      }
    }
  }

  .detail-content {
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fbfbfb;
    padding: 0 12px 12px;
    margin: 0 12px;
    box-sizing: border-box;
    .detail-content-concise {
      //min-height: 227px;
      box-sizing: border-box;
      .concise-item {
        box-sizing: border-box;
        position: relative;
        width: 90%;
        margin: 30px auto 18px;

        border: 2px dashed #7d7979;

        .concise-item-editor {
          position: relative;
          box-sizing: border-box;

          .concise-item-image,.concise-item-text {
            position: relative;
          }
        }
        .concise-item-move-box {
          position: absolute;
          top: -12px;
          left: 0;
          display: flex;
          z-index: 1;

          .icon-move-up, .icon-move-down {
            width: 24px;
            height: 24px;
            background-repeat: no-repeat;
            background-position: 50%;
            background-image: url('~@/assets/images/activity/arrow_down.png');
            background-size: contain;
            cursor: pointer;
          }

          .icon-move-up {
            transform: rotate(180deg);
            margin-right: 12px;
          }
        }

        .concise-item-image-btn {
          position: absolute;
          bottom: 7px;
          right: 12px;
          display: flex;
          z-index: 1;

          .btn {
            position: relative;
            display: flex;
            align-items: center;
            line-height: 36px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            border-radius: 3px;
            background: rgba(73, 73, 73, .6);
            padding: 0 10px;
            cursor: pointer;
            box-sizing: border-box;

            .icon-upload {
              width: 16px;
              height: 16px;
              background-repeat: no-repeat;
              background-position: 50%;
              background-image: url('~@/assets/images/activity/icon_upload.png');
              background-size: contain;
              margin-right: 6px;
            }
          }
        }

        .icon-close {
          position: absolute;
          top: -10px;
          right: -10px;
          width: 20px;
          height: 20px;
          background-repeat: no-repeat;
          background-position: 50%;
          background-image: url('~@/assets/images/activity/icon_close.png');
          background-size: contain;
          cursor: pointer;
          z-index: 2;
        }
      }
    }

    .concise-control-box {
      display: flex;
      justify-content: flex-start;
      //justify-content: space-between;
      color: #2254f5;
      font-size: 14px;
      background: #fff;
      margin-top: 20px;
      position: relative;
      .concise-control-btn {
        box-sizing: border-box;
        position: relative;
        width: 23%;
        margin-left: 1%;
        line-height: 30px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid #2254f5;
        white-space: nowrap;
        cursor: pointer;

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
}
</style>
